<template>
  <div ref="screen" class="galaxy-user feature-out">
    <div ref="searchDiv" class="filter-container">
      <el-date-picker
        v-model="datePicker"
        type="datetimerange"
        align="left"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        size="small"
        style="width: 410px"
        clearable
        class="filter-item"
      >
      </el-date-picker>
      <el-input
        v-model="listQuery.search.applyRiskId"
        placeholder="风控请求ID"
        style="width: 200px"
        size="small"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-select
        v-model="listQuery.search.applySource"
        placeholder="进件渠道"
        clearable
        style="width: 200px"
        size="small"
        class="filter-item"
      >
        <el-option
          v-for="item in applySource"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="listQuery.search.applyType"
        placeholder="进件类型"
        clearable
        style="width: 200px"
        size="small"
        class="filter-item"
      >
        <el-option label="授信" value="1"></el-option>
        <el-option label="用信" value="2"></el-option>
      </el-select>
      <el-select
        v-model="listQuery.search.applyResult"
        placeholder="审核状态"
        clearable
        size="small"
        style="width: 200px"
        class="filter-item"
      >
        <el-option label="拒绝" value="refuse"></el-option>
        <el-option label="通过" value="pass"></el-option>
        <el-option label="处理中" value="exception"></el-option>
        <el-option label="人工审核" value="manual"></el-option>
        <el-option label="异常挂起" value="pending"></el-option>
        <el-option label="开关挂起" value="switch_pending"></el-option>
      </el-select>
      <el-input
        v-model="listQuery.search.name"
        placeholder="借款人姓名"
        size="small"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.search.idCardNo"
        placeholder="借款人身份证号"
        size="small"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.search.mobile"
        placeholder="借款人手机号"
        size="small"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        size="small"
        type="primary"
        @click="handleFilter"
      >
        查询
      </el-button>
      <el-button
        @click="handleClear"
        type="primary"
        size="small"
        class="filter-item"
      >
        重置
      </el-button>
      <!-- <el-button
        @click="getList"
        type="primary"
        size="small"
        class="filter-item"
      >
        刷新
      </el-button> -->
    </div>
    <div style="display: flex; justify-content: space-between">
      <div style="margin-bottom: 12px; padding-top: 6px; position: relative">
        <span
          :class="[
            {
              'switch-title-open': switchPending,
              'switch-title-close': !switchPending
            },
            'switch-title'
          ]"
        >
          {{ this.switchPending ? '审批开启' : '审批关闭' }}
        </span>
        <el-switch
          v-model="switchPending"
          @change="switchChange()"
          active-color="#1890ff"
          :width="100"
          class="switch-trus"
        ></el-switch>
        <span
          style="color: rgb(0, 0, 0, 0.6); font-size: 14px; padding-top: 2px"
        >
          关闭时将挂起所有进件
        </span>
      </div>
      <div style="margin-bottom: 12px">
        <el-dropdown
          split-button
          size="mini"
          type="primary"
          @command="editBatch"
          style="margin-right: 12px"
        >
          批量操作
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              :disabled="!(applyResultAll === 'manual') || !dropdownShow"
              :command="1"
            >
              通过
            </el-dropdown-item>
            <el-dropdown-item
              :disabled="!(applyResultAll === 'manual') || !dropdownShow"
              :command="2"
            >
              拒绝
            </el-dropdown-item>
            <el-dropdown-item
              :disabled="
                !(
                  applyResultAll === 'switch_pending' ||
                  applyResultAll === 'pending'
                ) || !dropdownShow
              "
              :command="3"
            >
              重新审批
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div v-if="multipleSelection.length > 0" class="selectionTitle">
      <el-link type="primary" :underline="false">
        <i class="el-icon-info"></i>
      </el-link>
      已选择
      <span v-if="manualAudit.length > 0">
        <span class="titleColor">
          {{ manualAudit.length }}
        </span>
        项
        <span class="titleColor"> 人工审核 </span>
        进件订单
      </span>
      <span v-if="hangUp.length > 0">
        <span class="titleColor">
          {{ hangUp.length }}
        </span>
        项
        <span class="titleColor"> 异常挂起 </span>
        进件订单
      </span>
      <span v-if="switchSuspend.length > 0">
        <span class="titleColor">
          {{ switchSuspend.length }}
        </span>
        项
        <span class="titleColor"> 开关挂起 </span>
        进件订单
      </span>
      <el-button
        v-if="dropdownShow"
        @click="handleAll()"
        type="text"
        size="mini"
      >
        处理全部同类订单
      </el-button>
    </div>
    <el-scrollbar>
      <el-table
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        :data="list"
        ref="multipleTable"
        border
        @selection-change="handleSelectionChange"
        fit
        highlight-current-row
        :max-height="tableHeight"
        style="width: 100%; margin-bottom: 20px"
      >
        <el-table-column
          type="selection"
          :selectable="getSelectable"
          width="65px"
        ></el-table-column>
        <el-table-column
          prop="applyRiskId"
          label="风控请求ID"
          min-width="130px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="applyCode"
          label="资产编号"
          min-width="200px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="applySource"
          label="进件渠道"
          min-width="200px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="applyType"
          label="进件类型"
          min-width="100px"
          align="center"
        >
          <template slot-scope="scope">
            <span>
              {{
                scope.row.applyType === 0
                  ? '未知'
                  : scope.row.applyType === 1
                  ? '授信'
                  : '用信'
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="applyResult"
          label="审核状态"
          min-width="180px"
          align="center"
        >
          <template slot-scope="scope">
            <span>
              {{
                scope.row.applyResult === 'pass'
                  ? '通过'
                  : scope.row.applyResult === 'refuse'
                  ? '拒绝'
                  : scope.row.applyResult === 'manual'
                  ? '人工审核'
                  : scope.row.applyResult === 'pending'
                  ? '异常挂起'
                  : scope.row.applyResult === 'switch_pending'
                  ? '开关挂起'
                  : scope.row.applyResult === 'exception'
                  ? '处理中'
                  : ''
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="refuseRule"
          label="拒绝原因"
          min-width="180px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="userType"
          label="客群"
          min-width="80px"
          align="center"
        ></el-table-column>
        <el-table-column label="金额（元）" width="180px" align="right">
          <template slot-scope="scope">
            <!-- <span>{{ setMonry(scope.row.applyAmount / 100) }}</span> -->
            <count-to
              :start-val="0"
              :end-val="scope.row.applyAmount / 100"
              :decimals="2"
              :duration="1000"
              class="card-value"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="nameEncrypt"
          label="姓名"
          min-width="100px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="mobileEncrypt"
          label="手机号"
          min-width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="idCardNoEncrypt"
          label="身份证号"
          min-width="200px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createAt"
          label="申请时间"
          width="180px"
          align="center"
        >
          <template slot-scope="scope">
            <span>
              {{ formatDate(new Date(scope.row.createAt * 1000)) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180" fixed="right">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="mini"
              @click="handleDetail(row.applyRiskId)"
            >
              查看详情
            </el-button>
            <el-button
              v-if="row.applyResult === 'manual'"
              type="text"
              size="mini"
              @click="handle('1', row.applyRiskId)"
            >
              通过
            </el-button>
            <el-button
              v-if="row.applyResult === 'manual'"
              type="text"
              size="mini"
              @click="handle('2', row.applyRiskId)"
            >
              拒绝
            </el-button>
            <el-button
              v-if="
                row.applyResult === 'pending' ||
                  row.applyResult === 'switch_pending'
              "
              type="text"
              size="mini"
              @click="handleRetry(row.applyRiskId, row.applyResult)"
            >
              重新审批
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.page"
      :page-sizes="[10, 20, 50]"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :visible.sync="pubVisible"
      title="注意"
      width="360px"
    >
      <div style="font-size: 16px; text-align: center">
        人工审核操作成功后，进件审核状态将不可变更，确认是否继续？
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pubVisible = false" ref="btnCancel">取 消</el-button>
        <el-button type="primary" @click="edit()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :visible.sync="pubVisiblell"
      title="注意"
      width="360px"
    >
      <div style="font-size: 16px; text-align: center">
        人工审核操作成功后，进件审核状态将不可变更，确认是否继续？
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="manualAll(2)">拒绝</el-button>
        <el-button type="primary" @click="manualAll(1)">通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import CountTo from 'vue-count-to'
import {
  getSourceList,
  getRiskList,
  // edit,
  setSwitch,
  getSwitch,
  batchRetrySwitch,
  batchRetry,
  batchManual
} from '@/api/risksystem/trustTrial/index'
import { parseTimeJS as parseTime } from '@/utils' // 时间控件
interface ListQuery {
  [propName: string]: any
}
@Component({
  name: 'trustTrial',
  components: {
    //引用的组件在这里声明
    CountTo
  }
})
export default class extends Vue {
  @Prop({ default: '' }) private propExp1!: string
  // @Prop({ required: true }) private propExp2?: boolean
  // 一键挂起
  private switchPending: any = false
  private multipleSelection: any = []
  private dropdownShow = false
  // 人工审核
  private manualAudit: any = [] //人工审核
  private hangUp: any = [] // 异常挂起
  private switchSuspend: any = [] // 开关挂起
  // 全部类型
  private applyResultAll = ''
  private pubVisiblell = false
  // 表loading状态
  private dataExp: any = ''
  private listLoading: boolean = false
  private applySource = []
  private startDate = new Date().setTime(
    new Date().getTime() - 3600 * 1000 * 24 * 30
  )
  private endDate = new Date(
    new Date(new Date().toLocaleDateString()).getTime() +
      24 * 60 * 60 * 1000 -
      1
  )
  private datePicker: any = [
    this.formatDate(new Date(this.startDate)),
    this.formatDate(new Date(this.endDate))
  ]
  private title = ''
  // 操作
  private pubVisible = false
  private editLsit = {}
  private sourcesOptions = []
  // 公共查询对象
  private listQuery: ListQuery = {
    // 分页对象
    search: {
      startTime: Date.parse(this.datePicker[0]) / 1000,
      endTime: Date.parse(this.datePicker[1]) / 1000,
      applyRiskId: undefined, //进件id
      applyType: undefined, //进件类型 1授信 2用信
      applySource: undefined, //进件渠道
      name: undefined, //申请用户名
      idCardNo: undefined, //申请人身份证号
      mobile: undefined //手机号
    },
    limit: 10,
    page: 1
  }
  private tableHeight: any = null
  private source_idArr = []
  private list = []
  private total = 0
  get computedExp() {
    //computed 属性
    return true
  }
  @Watch('datePicker')
  private onDatePickerChange(value: boolean) {
    this.listQuery.search.startTime = this.datePicker
      ? Date.parse(this.datePicker[0]) / 1000
      : undefined
    this.listQuery.search.endTime = this.datePicker
      ? Date.parse(this.datePicker[1]) / 1000
      : undefined
  }
  @Watch('multipleSelection')
  private tableHeightChange(value: boolean) {
    this.init()
  }
  created() {
    // 最早可以调用vue组件method的钩子
    this.getList()
    this.getSource()
    this.getSwitch()
  }
  mounted() {
    //mounted 钩子
    this.init()
  }
  // 表格高度
  private init() {
    var _this = this
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight -
        (this.$refs.searchDiv as any).offsetHeight -
        (this.multipleSelection.length > 0 ? 320 : 280)
    })
    window.onresize = () => {
      this.$nextTick(() => {
        this.tableHeight =
          window.innerHeight -
          (this.$refs.searchDiv as any).offsetHeight -
          (this.multipleSelection.length > 0 ? 320 : 280)
      })
    }
  }
  beforeDestroy() {
    // 摧毁监听事件
    window.onresize = null
  }
  private methodExp() {
    // method创建地方
  }
  // 搜索项数据源请求
  private async getSource() {
    const { data } = await getSourceList()
    this.applySource = data
  }
  private handleClear() {
    this.datePicker = [
      this.formatDate(new Date(this.startDate)),
      this.formatDate(new Date(this.endDate))
    ]
    this.listQuery = {
      // 分页对象
      search: {
        startTime: Date.parse(this.datePicker[0]) / 1000,
        endTime: Date.parse(this.datePicker[1]) / 1000,
        applyRiskId: undefined, //进件id
        applyType: undefined, //进件类型 1授信 2用信
        applySource: undefined, //进件渠道
        name: undefined, //申请用户名
        idCardNo: undefined, //申请人身份证号
        mobile: undefined //手机号
      },
      limit: 20,
      page: 1
    }
    this.getList()
  }
  // 跳转页码查询
  handleCurrentChange(val: any) {
    this.listQuery.page = val
    this.getList()
  }
  // size切换查询
  handleSizeChange(val: any) {
    this.listQuery.limit = val
    this.getList()
  }
  handleFilter() {
    this.listQuery.page = 1
    this.getList()
  }
  // 一键挂起
  private switchChange() {
    if (this.switchPending === false) {
      this.$confirm('开关关闭，进件请求将被挂起，确认是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.setSwitch(1)
        })
        .catch(() => {
          // console.log(this.switchPending)
          this.switchPending = true
        })
    } else {
      this.$confirm(
        '开关打开，系统将自动重跑当前列表中处于开关挂起的进件，确认是否继续？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }
      )
        .then(() => {
          this.setSwitch(0)
        })
        .catch(() => {
          this.switchPending = false
        })
    }
  }
  private async setSwitch(data: any) {
    const resSetSwitch: any = await setSwitch({ value: data })
    if (resSetSwitch.code === 0) {
      this.$message.success(
        this.switchPending === false ? '挂起成功！' : '关闭成功！'
      )
      this.getList()
    }
  }
  private async getSwitch() {
    const resGetSwitch: any = await getSwitch()
    if (resGetSwitch.code === 0) {
      this.switchPending = Number(resGetSwitch.data.val) === 1 ? false : true
    }
  }
  // 开关挂起-重试
  private async batchRetrySwitch(data: any) {
    const resBatchRetrySwitch: any = await batchRetrySwitch(data)
    if (resBatchRetrySwitch.code === 0) {
      this.$alert('进件后台处理中，请稍后手动刷新！', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'success',
            message: '处理成功！'
          })
        }
      })
    }
    this.multipleSelection = []
    this.manualAudit = []
    this.hangUp = []
    this.applyResultAll = ''
    this.switchSuspend = []
    this.getList()
  }
  // 异常挂起-重试
  private async batchRetry(data: any) {
    const resBatchRetry: any = await batchRetry(data)
    if (resBatchRetry.code === 0) {
      this.$alert('进件后台处理中，请稍后手动刷新！', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'success',
            message: '处理成功！'
          })
        }
      })
    }
    this.multipleSelection = []
    this.manualAudit = []
    this.hangUp = []
    this.applyResultAll = ''
    this.switchSuspend = []
    this.getList()
  }
  // 处理一个
  private handleRetry(data: any, status: any) {
    var handleRetryData = { applyRiskIds: data }
    if (status === 'switch_pending') {
      this.batchRetrySwitch(handleRetryData)
    }
    if (status === 'pending') {
      this.batchRetry(handleRetryData)
    }
    // this.$confirm('进件后台处理中，请稍后手动刷新！', '提示', {
    //   confirmButtonText: '确定'
    // })
    //   .then(() => {})
    //   .catch(() => {})
  }
  // 人工审核-重试
  private async batchManual(data: any) {
    const resBatchManual: any = await batchManual(data)
    if (resBatchManual.code === 0) {
      this.$message.success('人工审核成功！')
      this.getList()
      this.pubVisible = false
      this.pubVisiblell = false
      this.multipleSelection = []
      this.manualAudit = []
      this.hangUp = []
      this.applyResultAll = ''
      this.switchSuspend = []
    }
  }
  private handle(status: any, id: any) {
    this.title = status
    this.editLsit = {
      applyRiskIds: id,
      operate: status
    }
    this.pubVisible = true
  }
  private edit() {
    // console.log.log(this.editLsit)
    this.batchManual(this.editLsit)
  }
  // 处理全部同类型
  private manualAll(status: any) {
    this.batchManual({
      applyRiskIds: null,
      operate: status
    })
  }
  private handleAll() {
    // console.log(this.applyResultAll)
    if (this.applyResultAll === 'manual') {
      this.pubVisiblell = true
    }
    if (this.applyResultAll === 'pending') {
      var eetryData = { applyRiskIds: null }
      this.batchRetry(eetryData)
      // console.log(this.hangUp)
    }
    if (this.applyResultAll === 'switch_pending') {
      // console.log(this.switchSuspend)
      var SwitchRetryData = { applyRiskIds: null }
      this.batchRetrySwitch(SwitchRetryData)
    }
  }
  // 批量同类型
  // 状态禁选
  private getSelectable(item: any) {
    if (
      item.applyResult === 'manual' ||
      item.applyResult === 'pending' ||
      item.applyResult === 'switch_pending'
    ) {
      return true
    } else {
      return false
    }
  }
  // 批量
  private editBatch(command: any) {
    if (this.applyResultAll === 'manual') {
      let manulaIds = this.multipleSelection.join(',')
      // console.log(manulaIds)
      var manulaData: any = {
        applyRiskIds: manulaIds,
        operate: command
      }
      let confirmText = ''
      if (command === 1) {
        confirmText = '是否审批为通过'
      } else if (command === 2) {
        confirmText = '是否审批为拒绝'
      }

      this.$confirm(
        '人工审核操作成功后，进件审核状态将不可变更，确认是否继续？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }
      )
        .then(() => {
          this.batchManual(manulaData)
        })
        .catch(() => {})
    }
    if (this.applyResultAll === 'pending') {
      let pendingIds = this.hangUp.join(',')
      // console.log(pendingIds)
      var eetryData = { applyRiskIds: pendingIds }
      this.batchRetry(eetryData)
    }
    if (this.applyResultAll === 'switch_pending') {
      let switchpendingIds = this.switchSuspend.join(',')
      // console.log(switchpendingIds)
      var SwitchRetryData = { applyRiskIds: switchpendingIds }
      this.batchRetrySwitch(SwitchRetryData)
    }
  }
  // 选择多个
  private handleSelectionChange(val: any) {
    // console.log(this.dropdownShow)
    this.multipleSelection = []
    this.manualAudit = []
    this.hangUp = []
    this.applyResultAll = ''
    this.switchSuspend = []
    var _this = this
    if (val.length > 0) {
      // console.log(val)
      // val.some(function(value: any, index: any) {
      //   if (value.applyResult !== val[0].applyResult) {
      //     // console.log('状态不一致')
      //     _this.dropdownShow = false
      //     _this.applyResultAll = ''
      //   } else {
      //     // console.log('状态一致')
      //     _this.dropdownShow = true
      //     _this.applyResultAll = val[0].applyResult
      //   }
      // })
      var selectVal = val.every(function(value: any, index: any, array: any) {
        return value.applyResult === val[0].applyResult
      })
      this.dropdownShow = selectVal
      this.applyResultAll = selectVal ? val[0].applyResult : ''
      val.forEach((item: any) => {
        _this.multipleSelection.push(item.applyRiskId)
        if (item.applyResult === 'manual') {
          _this.manualAudit.push(item.applyRiskId)
        }
        if (item.applyResult === 'pending') {
          _this.hangUp.push(item.applyRiskId)
        }
        if (item.applyResult === 'switch_pending') {
          _this.switchSuspend.push(item.applyRiskId)
        }
      })
    }
  }
  // 列表
  private async getList() {
    this.listLoading = true
    const { data } = await getRiskList(this.listQuery)
    this.list = data.list
    this.total = data.total
    this.listLoading = false
  }
  private executeCasData(data: []) {
    let tempData: any = []
    data.forEach((item: any) => {
      let selectRow: any = {}
      if (item && item.children.length > 0) {
        selectRow.children = this.executeCasData(item.children)
      }
      selectRow.value = item.id
      selectRow.label = item.name

      tempData.push(selectRow)
    })
    return tempData
  }
  private handleDetail(id: string) {
    this.$router.push({
      path: '/risksystem/trustTrial/detail?applyRiskId=' + id
    })
  }
  private formatDate(now: any) {
    var year = now.getFullYear() //取得4位数的年份
    var month = now.getMonth() + 1 //取得日期中的月份，其中0表示1月，11表示12月
    var date = now.getDate() //返回日期月份中的天数（1到31）
    var hour = now.getHours() //返回日期中的小时数（0到23）
    var minute = now.getMinutes() //返回日期中的分钟数（0到59）
    var second = now.getSeconds() //返回日期中的秒数（0到59）
    return (
      year +
      '-' +
      (month < 10 ? '0' + month : month) +
      '-' +
      (date < 10 ? '0' + date : date) +
      ' ' +
      (hour < 10 ? '0' + hour : hour) +
      ':' +
      (minute < 10 ? '0' + minute : minute) +
      ':' +
      (second < 10 ? '0' + second : second)
    )
  }
  private setMonry(data: any) {
    var reg = /\d{1,3}(?=(\d{3})+$)/g
    // return (data + '').replace(reg, '$&,')
    return data.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') //使用正则替换，每隔三个数加一个','
  }
}
</script>
<style lang="scss">
.search-popover {
  padding: 60px 24px 24px !important;
  position: relative;
  font-weight: 400;
  color: rgba(56, 58, 63, 1);
  .search-title {
    height: 60px;
    padding: 20px 24px;
    border-bottom: 1px solid #ebeef5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
  }
  .el-form {
    .el-form-item {
      .el-form--label-top .el-form-item__label {
        padding: 0;
      }
    }
  }
}
</style>
<style scoped>
.galaxy-user {
  padding: 20px;
}
.selectionTitle {
  height: 30px;
  line-height: 30px;
  background: #1890ff3d;
  font-size: 12px;
  padding: 0px 16px;
  margin-bottom: 12px;
}
.titleColor {
  font-size: 12px;
  color: #1890ff;
}
.el-switch__core {
  height: 30px !important;
}
.switch-title {
  color: #fff;
  font-size: 14px;
  position: absolute;
  z-index: 2;
  font-weight: 600;
  top: 9px;
}
.switch-title-open {
  left: 12px;
}
.switch-title-close {
  left: 34px;
}
</style>
<style lang="scss">
.switch-trus.el-switch {
  .el-switch__core {
    height: 30px !important;
    border-radius: 15px !important;
  }
  .el-switch__core:after {
    height: 28px !important;
    width: 28px !important;
    top: 0 !important;
  }
}
.switch-trus.is-checked .el-switch__core:after {
  margin-left: -28px !important;
}
</style>
